import initShader from '../utils/initShader'

const canvasElement = document.createElement('canvas');

canvasElement.width = 400;
canvasElement.height = 400;
canvasElement.style.backgroundColor = '#000';
document.body.appendChild(canvasElement);

const gl = canvasElement.getContext('webgl'); //3d 上下文对象
const program = initShader(gl)


const vertices = new Float32Array([
  -0.5, -0.5, 1.0, 0.0, 0.0, 1.0,  //第一个点的x,y坐标
  0.5, -0.5, 1.0, 0.0, 1.0, 1.0,  //第二个点的x,y坐标
  0, 0.5, 0.0, 1.0, 1.0, 1.0,  //第三个点的x,y坐标
])

const buffer = gl.createBuffer(); // 创建缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // 绑定缓冲区
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); // 填充缓冲区

const a_position_location = gl.getAttribLocation(program, 'a_position'); // 获取着色器中的变量的地址
/**
 * 顶点属性的索引位置
 * 每个顶点属性的组件数量
 * 指定数组中每个组件的数据类型[gl.BYTE、gl.UNSIGNED_BYTE、gl.SHORT、gl.UNSIGNED_SHORT、gl.FLOAT]
 * 是否归一化
 * 指定连续顶点属性间的字节偏移量 【Float32Array.BYTES_PER_ELEMENT 一个元素的字节长】
 * 指定顶点属性数组中起始位置的字节偏移量
 */
gl.vertexAttribPointer(a_position_location, 2, gl.FLOAT, false, 6 * Float32Array.BYTES_PER_ELEMENT, 0); // 告诉 WebGL如何解析缓冲区中的数据
gl.enableVertexAttribArray(a_position_location); // 启用顶点属性数组

const a_color_location = gl.getAttribLocation(program, 'a_color'); // 获取着色器中的变量的地址
gl.vertexAttribPointer(a_color_location, 4, gl.FLOAT, false, 6 * Float32Array.BYTES_PER_ELEMENT, 2 * Float32Array.BYTES_PER_ELEMENT); // 告诉 WebGL如何解析缓冲区中的数据
gl.enableVertexAttribArray(a_color_location); // 启用顶点属性数组

// 画线
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3); //绘制图元






